<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Form Elements | Velonic - Bootstrap 5 Admin & Dashboard Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully responsive admin theme which can be used to build CRM, CMS,ERP etc." name="description"/>
    <meta content="Techzaa" name="author"/>
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <script src="assets/js/config.js"></script>
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-style"/>
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
    <div class="navbar-custom">
        <div class="topbar container-fluid">
            <div class="d-flex align-items-center gap-1">
                <div class="logo-topbar">
                    <a href="index.html" class="logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="logo">
</span>
                        <span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
                    </a>
                    <a href="index.html" class="logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="dark logo">
</span>
                        <span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
                    </a>
                </div>
                <button class="button-toggle-menu">
                    <i class="ri-menu-line"></i>
                </button>
                <button class="navbar-toggle" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                    <div class="lines">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </button>
                <div class="app-search d-none d-lg-block">
                    <form>
                        <div class="input-group">
                            <input type="search" class="form-control" placeholder="Search...">
                            <span class="ri-search-line search-icon text-muted"></span>
                        </div>
                    </form>
                </div>
            </div>
            <ul class="topbar-menu d-flex align-items-center gap-3">
                <li class="dropdown d-lg-none">
                    <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
                       aria-haspopup="false" aria-expanded="false">
                        <i class="ri-search-line fs-22"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-animated dropdown-lg p-0">
                        <form class="p-3">
                            <input type="search" class="form-control" placeholder="Search ..."
                                   aria-label="Recipient's username">
                        </form>
                    </div>
                </li>
                <li class="dropdown">
                    <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
                       aria-haspopup="false" aria-expanded="false">
                        <img src="assets/images/flags/us.jpg" alt="user-image" class="me-0 me-sm-1" height="12">
                        <span class="align-middle d-none d-lg-inline-block">English</span> <i
                            class="ri-arrow-down-s-line d-none d-sm-inline-block align-middle"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated">
                        <a href="javascript:void(0);" class="dropdown-item">
                            <img src="assets/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle">German</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item">
                            <img src="assets/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle">Italian</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item">
                            <img src="assets/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle">Spanish</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item">
                            <img src="assets/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle">Russian</span>
                        </a>
                    </div>
                </li>
                <li class="dropdown notification-list">
                    <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
                       aria-haspopup="false" aria-expanded="false">
                        <i class="ri-mail-line fs-22"></i>
                        <span class="noti-icon-badge badge text-bg-purple">4</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0">
                        <div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="m-0 fs-16 fw-semibold"> Messages</h6>
                                </div>
                                <div class="col-auto">
                                    <a href="javascript: void(0);" class="text-dark text-decoration-underline">
                                        <small>Clear All</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div style="max-height: 300px;" data-simplebar>
                            <a href="javascript:void(0);"
                               class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="notify-icon">
                                                <img src="assets/images/users/avatar-1.jpg"
                                                     class="img-fluid rounded-circle" alt=""/>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 text-truncate ms-2">
                                            <h5 class="noti-item-title fw-semibold fs-14">Cristina Pride <small
                                                    class="fw-normal text-muted float-end ms-1">1 day ago</small></h5>
                                            <small class="noti-item-subtitle text-muted">Hi, How are you? What about our
                                                next meeting</small>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0);"
                               class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="notify-icon">
                                                <img src="assets/images/users/avatar-2.jpg"
                                                     class="img-fluid rounded-circle" alt=""/>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 text-truncate ms-2">
                                            <h5 class="noti-item-title fw-semibold fs-14">Sam Garret <small
                                                    class="fw-normal text-muted float-end ms-1">2 day ago</small></h5>
                                            <small class="noti-item-subtitle text-muted">Yeah everything is fine</small>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0);"
                               class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="notify-icon">
                                                <img src="assets/images/users/avatar-3.jpg"
                                                     class="img-fluid rounded-circle" alt=""/>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 text-truncate ms-2">
                                            <h5 class="noti-item-title fw-semibold fs-14">Karen Robinson <small
                                                    class="fw-normal text-muted float-end ms-1">2 day ago</small></h5>
                                            <small class="noti-item-subtitle text-muted">Wow that's great</small>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0);"
                               class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="notify-icon">
                                                <img src="assets/images/users/avatar-4.jpg"
                                                     class="img-fluid rounded-circle" alt=""/>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 text-truncate ms-2">
                                            <h5 class="noti-item-title fw-semibold fs-14">Sherry Marshall <small
                                                    class="fw-normal text-muted float-end ms-1">3 day ago</small></h5>
                                            <small class="noti-item-subtitle text-muted">Hi, How are you? What about our
                                                next meeting</small>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0);"
                               class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="notify-icon">
                                                <img src="assets/images/users/avatar-5.jpg"
                                                     class="img-fluid rounded-circle" alt=""/>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 text-truncate ms-2">
                                            <h5 class="noti-item-title fw-semibold fs-14">Shawn Millard <small
                                                    class="fw-normal text-muted float-end ms-1">4 day ago</small></h5>
                                            <small class="noti-item-subtitle text-muted">Yeah everything is fine</small>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <a href="javascript:void(0);"
                           class="dropdown-item text-center text-primary text-decoration-underline fw-bold notify-item border-top border-light py-2">
                            View All
                        </a>
                    </div>
                </li>
                <li class="dropdown notification-list">
                    <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
                       aria-haspopup="false" aria-expanded="false">
                        <i class="ri-notification-3-line fs-22"></i>
                        <span class="noti-icon-badge badge text-bg-pink">3</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0">
                        <div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="m-0 fs-16 fw-semibold"> Notification</h6>
                                </div>
                                <div class="col-auto">
                                    <a href="javascript: void(0);" class="text-dark text-decoration-underline">
                                        <small>Clear All</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div style="max-height: 300px;" data-simplebar>
                            <a href="javascript:void(0);" class="dropdown-item notify-item">
                                <div class="notify-icon bg-primary-subtle">
                                    <i class="mdi mdi-comment-account-outline text-primary"></i>
                                </div>
                                <p class="notify-details">Caleb Flakelar commented on Admin
                                    <small class="noti-time">1 min ago</small>
                                </p>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item notify-item">
                                <div class="notify-icon bg-warning-subtle">
                                    <i class="mdi mdi-account-plus text-warning"></i>
                                </div>
                                <p class="notify-details">New user registered.
                                    <small class="noti-time">5 hours ago</small>
                                </p>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item notify-item">
                                <div class="notify-icon bg-danger-subtle">
                                    <i class="mdi mdi-heart text-danger"></i>
                                </div>
                                <p class="notify-details">Carlos Crouch liked
                                    <small class="noti-time">3 days ago</small>
                                </p>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item notify-item">
                                <div class="notify-icon bg-pink-subtle">
                                    <i class="mdi mdi-comment-account-outline text-pink"></i>
                                </div>
                                <p class="notify-details">Caleb Flakelar commented on Admi
                                    <small class="noti-time">4 days ago</small>
                                </p>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item notify-item">
                                <div class="notify-icon bg-purple-subtle">
                                    <i class="mdi mdi-account-plus text-purple"></i>
                                </div>
                                <p class="notify-details">New user registered.
                                    <small class="noti-time">7 days ago</small>
                                </p>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item notify-item">
                                <div class="notify-icon bg-success-subtle">
                                    <i class="mdi mdi-heart text-success"></i>
                                </div>
                                <p class="notify-details">Carlos Crouch liked <b>Admin</b>.
                                    <small class="noti-time">Carlos Crouch liked</small>
                                </p>
                            </a>
                        </div>
                        <a href="javascript:void(0);"
                           class="dropdown-item text-center text-primary text-decoration-underline fw-bold notify-item border-top border-light py-2">
                            View All
                        </a>
                    </div>
                </li>
                <li class="d-none d-sm-inline-block">
                    <a class="nav-link" data-bs-toggle="offcanvas" href="#theme-settings-offcanvas">
                        <i class="ri-settings-3-line fs-22"></i>
                    </a>
                </li>
                <li class="d-none d-sm-inline-block">
                    <div class="nav-link" id="light-dark-mode">
                        <i class="ri-moon-line fs-22"></i>
                    </div>
                </li>
                <li class="dropdown">
                    <a class="nav-link dropdown-toggle arrow-none nav-user" data-bs-toggle="dropdown" href="#"
                       role="button" aria-haspopup="false" aria-expanded="false">
<span class="account-user-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" width="32" class="rounded-circle">
</span>
                        <span class="d-lg-block d-none">
<h5 class="my-0 fw-normal">Thomson <i class="ri-arrow-down-s-line d-none d-sm-inline-block align-middle"></i></h5>
</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated profile-dropdown">
                        <div class=" dropdown-header noti-title">
                            <h6 class="text-overflow m-0">Welcome !</h6>
                        </div>
                        <a href="pages-profile.html" class="dropdown-item">
                            <i class="ri-account-circle-line fs-18 align-middle me-1"></i>
                            <span>My Account</span>
                        </a>
                        <a href="pages-profile.html" class="dropdown-item">
                            <i class="ri-settings-4-line fs-18 align-middle me-1"></i>
                            <span>Settings</span>
                        </a>
                        <a href="pages-faq.html" class="dropdown-item">
                            <i class="ri-customer-service-2-line fs-18 align-middle me-1"></i>
                            <span>Support</span>
                        </a>
                        <a href="auth-lock-screen.html" class="dropdown-item">
                            <i class="ri-lock-password-line fs-18 align-middle me-1"></i>
                            <span>Lock Screen</span>
                        </a>
                        <a href="auth-logout-2.html" class="dropdown-item">
                            <i class="ri-logout-box-line fs-18 align-middle me-1"></i>
                            <span>Logout</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="leftside-menu">
        <a href="index.html" class="logo logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="logo">
</span>
            <span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
        </a>
        <a href="index.html" class="logo logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="dark logo">
</span>
            <span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
        </a>
        <div class="h-100" id="leftside-menu-container" data-simplebar>
            <ul class="side-nav">
                <li class="side-nav-title">Main</li>
                <li class="side-nav-item">
                    <a href="index.html" class="side-nav-link">
                        <i class="ri-dashboard-3-line"></i>
                        <span class="badge bg-success float-end">9+</span>
                        <span> Dashboard </span>
                    </a>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages"
                       class="side-nav-link">
                        <i class="ri-pages-line"></i>
                        <span> Pages </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPages">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="pages-starter.html">Starter Page</a>
                            </li>
                            <li>
                                <a href="pages-contact-list.html">Contact List</a>
                            </li>
                            <li>
                                <a href="pages-profile.html">Profile</a>
                            </li>
                            <li>
                                <a href="pages-timeline.html">Timeline</a>
                            </li>
                            <li>
                                <a href="pages-invoice.html">Invoice</a>
                            </li>
                            <li>
                                <a href="pages-faq.html">FAQ</a>
                            </li>
                            <li>
                                <a href="pages-pricing.html">Pricing</a>
                            </li>
                            <li>
                                <a href="pages-maintenance.html">Maintenance</a>
                            </li>
                            <li>
                                <a href="error-404.html">Error 404</a>
                            </li>
                            <li>
                                <a href="error-404-alt.html">Error 404-alt</a>
                            </li>
                            <li>
                                <a href="error-500.html">Error 500</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false"
                       aria-controls="sidebarPagesAuth" class="side-nav-link">
                        <i class="ri-group-2-line"></i>
                        <span> Authentication </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPagesAuth">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="auth-login.html">Login</a>
                            </li>
                            <li>
                                <a href="auth-register.html">Register</a>
                            </li>
                            <li>
                                <a href="auth-logout.html">Logout</a>
                            </li>
                            <li>
                                <a href="auth-forgotpw.html">Forgot Password</a>
                            </li>
                            <li>
                                <a href="auth-lock-screen.html">Lock Screen</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false"
                       aria-controls="sidebarLayouts" class="side-nav-link">
                        <i class="ri-layout-line"></i>
                        <span class="badge bg-warning float-end">New</span>
                        <span> Layouts </span>
                    </a>
                    <div class="collapse" id="sidebarLayouts">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="layouts-horizontal.html" target="_blank">Horizontal</a>
                            </li>
                            <li>
                                <a href="layouts-light-sidebar.html" target="_blank">Light Sidebar</a>
                            </li>
                            <li>
                                <a href="layouts-sm-sidebar.html" target="_blank">Small Sidebar</a>
                            </li>
                            <li>
                                <a href="layouts-collapsed-sidebar.html" target="_blank">Collapsed Sidebar</a>
                            </li>
                            <li>
                                <a href="layouts-unsticky-layout.html" target="_blank">Unsticky Layout</a>
                            </li>
                            <li>
                                <a href="layouts-boxed.html" target="_blank">Boxed Layout</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-title">Components</li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false"
                       aria-controls="sidebarBaseUI" class="side-nav-link">
                        <i class="ri-briefcase-line"></i>
                        <span> Base UI </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarBaseUI">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="ui-accordions.html">Accordions</a>
                            </li>
                            <li>
                                <a href="ui-alerts.html">Alerts</a>
                            </li>
                            <li>
                                <a href="ui-avatars.html">Avatars</a>
                            </li>
                            <li>
                                <a href="ui-buttons.html">Buttons</a>
                            </li>
                            <li>
                                <a href="ui-badges.html">Badges</a>
                            </li>
                            <li>
                                <a href="ui-breadcrumb.html">Breadcrumb</a>
                            </li>
                            <li>
                                <a href="ui-cards.html">Cards</a>
                            </li>
                            <li>
                                <a href="ui-carousel.html">Carousel</a>
                            </li>
                            <li>
                                <a href="ui-collapse.html">Collapse</a>
                            </li>
                            <li>
                                <a href="ui-dropdowns.html">Dropdowns</a>
                            </li>
                            <li>
                                <a href="ui-embed-video.html">Embed Video</a>
                            </li>
                            <li>
                                <a href="ui-grid.html">Grid</a>
                            </li>
                            <li>
                                <a href="ui-links.html">Links</a>
                            </li>
                            <li>
                                <a href="ui-list-group.html">List Group</a>
                            </li>
                            <li>
                                <a href="ui-modals.html">Modals</a>
                            </li>
                            <li>
                                <a href="ui-notifications.html">Notifications</a>
                            </li>
                            <li>
                                <a href="ui-offcanvas.html">Offcanvas</a>
                            </li>
                            <li>
                                <a href="ui-placeholders.html">Placeholders</a>
                            </li>
                            <li>
                                <a href="ui-pagination.html">Pagination</a>
                            </li>
                            <li>
                                <a href="ui-popovers.html">Popovers</a>
                            </li>
                            <li>
                                <a href="ui-progress.html">Progress</a>
                            </li>
                            <li>
                                <a href="ui-spinners.html">Spinners</a>
                            </li>
                            <li>
                                <a href="ui-tabs.html">Tabs</a>
                            </li>
                            <li>
                                <a href="ui-tooltips.html">Tooltips</a>
                            </li>
                            <li>
                                <a href="ui-typography.html">Typography</a>
                            </li>
                            <li>
                                <a href="ui-utilities.html">Utilities</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarExtendedUI" aria-expanded="false"
                       aria-controls="sidebarExtendedUI" class="side-nav-link">
                        <i class="ri-compasses-2-line"></i>
                        <span> Extended UI </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarExtendedUI">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="extended-portlets.html">Portlets</a>
                            </li>
                            <li>
                                <a href="extended-scrollbar.html">Scrollbar</a>
                            </li>
                            <li>
                                <a href="extended-range-slider.html">Range Slider</a>
                            </li>
                            <li>
                                <a href="extended-scrollspy.html">Scrollspy</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons"
                       class="side-nav-link">
                        <i class="ri-pencil-ruler-2-line"></i>
                        <span> Icons </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarIcons">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="icons-remixicons.html">Remix Icons</a>
                            </li>
                            <li>
                                <a href="icons-bootstrap.html">Bootstrap Icons</a>
                            </li>
                            <li>
                                <a href="icons-mdi.html">Material Design Icons</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false"
                       aria-controls="sidebarCharts" class="side-nav-link">
                        <i class="ri-donut-chart-fill"></i>
                        <span> Charts </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarCharts">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="charts-apex.html">Apex Charts</a>
                            </li>
                            <li>
                                <a href="charts-chartjs.html">Chartjs</a>
                            </li>
                            <li>
                                <a href="charts-sparklines.html">Sparkline Charts</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms"
                       class="side-nav-link">
                        <i class="ri-survey-line"></i>
                        <span> Forms </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarForms">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="form-elements.html">Basic Elements</a>
                            </li>
                            <li>
                                <a href="form-advanced.html">Form Advanced</a>
                            </li>
                            <li>
                                <a href="form-validation.html">Form Validation</a>
                            </li>
                            <li>
                                <a href="form-wizard.html">Form Wizard</a>
                            </li>
                            <li>
                                <a href="form-fileuploads.html">File Uploads</a>
                            </li>
                            <li>
                                <a href="form-editors.html">Form Editors</a>
                            </li>
                            <li>
                                <a href="form-image-crop.html">Image Crop</a>
                            </li>
                            <li>
                                <a href="form-x-editable.html">X Editable</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false"
                       aria-controls="sidebarTables" class="side-nav-link">
                        <i class="ri-table-line"></i>
                        <span> Tables </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarTables">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="tables-basic.html">Basic Tables</a>
                            </li>
                            <li>
                                <a href="tables-datatable.html">Data Tables</a>
                            </li>
                            <li>
                                <a href="tables-editable.html">Editable Tables</a>
                            </li>
                            <li>
                                <a href="tables-responsive.html">Responsive Table</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps"
                       class="side-nav-link">
                        <i class="ri-map-pin-line"></i>
                        <span> Maps </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMaps">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="maps-google.html">Google Maps</a>
                            </li>
                            <li>
                                <a href="maps-vector.html">Vector Maps</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMultiLevel" aria-expanded="false"
                       aria-controls="sidebarMultiLevel" class="side-nav-link">
                        <i class="ri-share-line"></i>
                        <span> Multi Level </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMultiLevel">
                        <ul class="side-nav-second-level">
                            <li>
                                <a href="javascript: void(0);">Level 1.1</a>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false"
                                   aria-controls="sidebarSecondLevel">
                                    <span> Level 1.2 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarSecondLevel">
                                    <ul class="side-nav-third-level">
                                        <li>
                                            <a href="javascript: void(0);">Item 1</a>
                                        </li>
                                        <li>
                                            <a href="javascript: void(0);">Item 2</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false"
                                   aria-controls="sidebarThirdLevel">
                                    <span> Level 1.3 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarThirdLevel">
                                    <ul class="side-nav-third-level">
                                        <li>
                                            <a href="javascript: void(0);">Item 1</a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a data-bs-toggle="collapse" href="#sidebarFourthLevel"
                                               aria-expanded="false" aria-controls="sidebarFourthLevel">
                                                <span> Item 2 </span>
                                                <span class="menu-arrow"></span>
                                            </a>
                                            <div class="collapse" id="sidebarFourthLevel">
                                                <ul class="side-nav-forth-level">
                                                    <li>
                                                        <a href="javascript: void(0);">Item 2.1</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript: void(0);">Item 2.2</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Velonic</a></li>
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                                    <li class="breadcrumb-item active">Form Elements</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Form Elements</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Input Types</h4>
                                <p class="text-muted mb-0">
                                    Most common form control, text-based input fields. Includes support for all
                                    HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>,
                                    <code>datetime-local</code>, <code>date</code>, <code>month</code>,
                                    <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>,
                                    <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.
                                </p>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <form>
                                            <div class="mb-3">
                                                <label for="simpleinput" class="form-label">Text</label>
                                                <input type="text" id="simpleinput" class="form-control">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-email" class="form-label">Email</label>
                                                <input type="email" id="example-email" name="example-email"
                                                       class="form-control" placeholder="Email">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-password" class="form-label">Password</label>
                                                <input type="password" id="example-password" class="form-control"
                                                       value="password">
                                            </div>
                                            <div class="mb-3">
                                                <label for="password" class="form-label">Show/Hide Password</label>
                                                <div class="input-group input-group-merge">
                                                    <input type="password" id="password" class="form-control"
                                                           placeholder="Enter your password">
                                                    <div class="input-group-text" data-password="false">
                                                        <span class="password-eye"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-palaceholder" class="form-label">Placeholder</label>
                                                <input type="text" id="example-palaceholder" class="form-control"
                                                       placeholder="placeholder">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-textarea" class="form-label">Text area</label>
                                                <textarea class="form-control" id="example-textarea"
                                                          rows="5"></textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-readonly" class="form-label">Readonly</label>
                                                <input type="text" id="example-readonly" class="form-control"
                                                       readonly="" value="Readonly value">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-disable" class="form-label">Disabled</label>
                                                <input type="text" class="form-control" id="example-disable" disabled=""
                                                       value="Disabled value">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-static" class="form-label">Static
                                                    control</label>
                                                <input type="text" readonly class="form-control-plaintext"
                                                       id="example-static" value="email@example.com">
                                            </div>
                                            <div class="mb-0">
                                                <label for="example-helping" class="form-label">Helping text</label>
                                                <input type="text" id="example-helping" class="form-control"
                                                       placeholder="Helping text">
                                                <span class="help-block"><small>A block of help text that breaks
onto a new line and may extend beyond one
line.</small></span>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-lg-6">
                                        <form>
                                            <div class="mb-3">
                                                <label for="example-select" class="form-label">Input Select</label>
                                                <select class="form-select" id="example-select">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-multiselect" class="form-label">Multiple
                                                    Select</label>
                                                <select id="example-multiselect" multiple class="form-control">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-fileinput" class="form-label">Default file
                                                    input</label>
                                                <input type="file" id="example-fileinput" class="form-control">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-date" class="form-label">Date</label>
                                                <input class="form-control" id="example-date" type="date" name="date">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-month" class="form-label">Month</label>
                                                <input class="form-control" id="example-month" type="month"
                                                       name="month">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-time" class="form-label">Time</label>
                                                <input class="form-control" id="example-time" type="time" name="time">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-week" class="form-label">Week</label>
                                                <input class="form-control" id="example-week" type="week" name="week">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-number" class="form-label">Number</label>
                                                <input class="form-control" id="example-number" type="number"
                                                       name="number">
                                            </div>
                                            <div class="mb-3">
                                                <label for="example-color" class="form-label">Color</label>
                                                <input class="form-control" id="example-color" type="color" name="color"
                                                       value="#727cf5">
                                            </div>
                                            <div class="mb-0">
                                                <label for="example-range" class="form-label">Range</label>
                                                <input class="form-range" id="example-range" type="range" name="range"
                                                       min="0" max="100">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Floating labels</h4>
                                <p class="text-muted mb-0">
                                    Wrap a pair of <code>&lt;input class="form-control"&gt;</code> and
                                    <code>&lt;label&gt;</code> elements in <code>.form-floating</code> to enable
                                    floating labels with Bootstrap’s textual form fields. A <code>placeholder</code>
                                    is required on each <code>&lt;input&gt;</code> as our method of CSS-only
                                    floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also
                                    note that the <code>&lt;input&gt;</code> must come first so we can utilize a
                                    sibling selector (e.g., <code>~</code>).
                                </p>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <h5 class="mb-3">Example</h5>
                                        <div class="form-floating mb-3">
                                            <input type="email" class="form-control" id="floatingInput"
                                                   placeholder="name@example.com">
                                            <label for="floatingInput">Email address</label>
                                        </div>
                                        <div class="form-floating">
                                            <input type="password" class="form-control" id="floatingPassword"
                                                   placeholder="Password">
                                            <label for="floatingPassword">Password</label>
                                        </div>
                                        <h5 class="mb-3 mt-4">Textareas</h5>
                                        <div class="form-floating">
                                            <textarea class="form-control" placeholder="Leave a comment here"
                                                      id="floatingTextarea" style="height: 100px"></textarea>
                                            <label for="floatingTextarea">Comments</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <h5 class="mb-3">Selects</h5>
                                        <div class="form-floating">
                                            <select class="form-select" id="floatingSelect"
                                                    aria-label="Floating label select example">
                                                <option selected>Open this select menu</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                            <label for="floatingSelect">Works with selects</label>
                                        </div>
                                        <h5 class="mb-3 mt-4">Layout</h5>
                                        <div class="row g-2">
                                            <div class="col-md">
                                                <div class="form-floating">
                                                    <input type="email" class="form-control" id="floatingInputGrid"
                                                           placeholder="name@example.com" value="mdo@example.com">
                                                    <label for="floatingInputGrid">Email address</label>
                                                </div>
                                            </div>
                                            <div class="col-md">
                                                <div class="form-floating">
                                                    <select class="form-select" id="floatingSelectGrid"
                                                            aria-label="Floating label select example">
                                                        <option selected>Open this select menu</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                    <label for="floatingSelectGrid">Works with selects</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title mb-0">Select & Switches</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <h4 class="header-title">Select</h4>
                                        <p class="text-muted fs-14">
                                            <code>&lt;select&gt;</code> menus need only a custom class,
                                            <code>.form-select</code> to trigger the custom styles.
                                        </p>
                                        <select class="form-select mb-3">
                                            <option selected>Open this select menu</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        <select class="form-select form-select-lg mb-3">
                                            <option selected>Open this select menu</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        <select class="form-select form-select-sm mb-3">
                                            <option selected>Open this select menu</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        <div class="input-group mb-3">
                                            <label class="input-group-text" for="inputGroupSelect01">Options</label>
                                            <select class="form-select" id="inputGroupSelect01">
                                                <option selected>Choose...</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </div>
                                        <div class="input-group">
                                            <select class="form-select" id="inputGroupSelect04"
                                                    aria-label="Example select with button addon">
                                                <option selected>Choose...</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                            <button class="btn btn-outline-secondary" type="button">Button</button>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <h4 class="header-title mt-5 mt-lg-0">Switches</h4>
                                        <p class="text-muted fs-14">
                                            A switch has the markup of a custom checkbox but uses the
                                            <code>.form-switch</code> class to render a toggle switch. Switches also
                                            support the <code>disabled</code> attribute.
                                        </p>
                                        <div class="form-check form-switch">
                                            <input type="checkbox" class="form-check-input" id="customSwitch1">
                                            <label class="form-check-label" for="customSwitch1">Toggle this switch
                                                element</label>
                                        </div>
                                        <div class="form-check form-switch mt-1">
                                            <input type="checkbox" class="form-check-input" disabled id="customSwitch2">
                                            <label class="form-check-label" for="customSwitch2">Disabled switch
                                                element</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title mt-5 mt-lg-0">Checkboxes </h4>
                                <p class="text-muted mb-0">
                                    Each checkbox and radio <code>&lt;input&gt;</code> and
                                    <code>&lt;label&gt;</code> pairing is wrapped in a <code>&lt;div&gt;</code> to
                                    create our custom control. Structurally, this is the same approach as our
                                    default <code>.form-check</code>.
                                </p>
                            </div>
                            <div class="card-body">
                                <h6 class="fs-15">Checkboxes</h6>
                                <div class="mt-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="customCheck1">
                                        <label class="form-check-label" for="customCheck1">Check this custom
                                            checkbox</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="customCheck2">
                                        <label class="form-check-label" for="customCheck2">Check this custom
                                            checkbox</label>
                                    </div>
                                </div>
                                <h6 class="fs-15 mt-3">Inline</h6>
                                <div class="mt-2">
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" class="form-check-input" id="customCheck3">
                                        <label class="form-check-label" for="customCheck3">Check this custom
                                            checkbox</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" class="form-check-input" id="customCheck4">
                                        <label class="form-check-label" for="customCheck4">Check this custom
                                            checkbox</label>
                                    </div>
                                </div>
                                <h6 class="fs-15 mt-3">Disabled</h6>
                                <div class="mt-2">
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" class="form-check-input" id="customCheck5" checked
                                               disabled>
                                        <label class="form-check-label" for="customCheck5">Check this custom
                                            checkbox</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" class="form-check-input" id="customCheck6" disabled>
                                        <label class="form-check-label" for="customCheck6">Check this custom
                                            checkbox</label>
                                    </div>
                                </div>
                                <h6 class="fs-15 mt-3">Colors</h6>
                                <div class="form-check mb-2">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor1" checked>
                                    <label class="form-check-label" for="customCheckcolor1">Default Checkbox</label>
                                </div>
                                <div class="form-check form-checkbox-success mb-2">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor2" checked>
                                    <label class="form-check-label" for="customCheckcolor2">Success Checkbox</label>
                                </div>
                                <div class="form-check form-checkbox-info mb-2">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor3" checked>
                                    <label class="form-check-label" for="customCheckcolor3">Info Checkbox</label>
                                </div>
                                <div class="form-check form-checkbox-secondary mb-2">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor6" checked>
                                    <label class="form-check-label" for="customCheckcolor6">Secondary
                                        Checkbox</label>
                                </div>
                                <div class="form-check  form-checkbox-warning mb-2">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor4" checked>
                                    <label class="form-check-label" for="customCheckcolor4">Warning Checkbox</label>
                                </div>
                                <div class="form-check form-checkbox-danger mb-2">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor5" checked>
                                    <label class="form-check-label" for="customCheckcolor5">Danger Checkbox</label>
                                </div>
                                <div class="form-check form-checkbox-dark">
                                    <input type="checkbox" class="form-check-input" id="customCheckcolor7" checked>
                                    <label class="form-check-label" for="customCheckcolor7">Dark Checkbox</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title mt-5 mt-lg-0">radios</h4>
                                <p class="text-muted mb-0">
                                    Each checkbox and radio <code>&lt;input&gt;</code> and
                                    <code>&lt;label&gt;</code> pairing is wrapped in a <code>&lt;div&gt;</code> to
                                    create our custom control. Structurally, this is the same approach as our
                                    default <code>.form-check</code>.
                                </p>
                            </div>
                            <div class="card-body">
                                <h6 class="fs-15 mt-3">Radios</h6>
                                <div class="mt-3">
                                    <div class="form-check">
                                        <input type="radio" id="customRadio1" name="customRadio"
                                               class="form-check-input">
                                        <label class="form-check-label" for="customRadio1">Toggle this custom
                                            radio</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio" id="customRadio2" name="customRadio"
                                               class="form-check-input">
                                        <label class="form-check-label" for="customRadio2">Or toggle this other
                                            custom radio</label>
                                    </div>
                                </div>
                                <h6 class="fs-15 mt-3">Inline</h6>
                                <div class="mt-2">
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="customRadio3" name="customRadio1"
                                               class="form-check-input">
                                        <label class="form-check-label" for="customRadio3">Toggle this custom
                                            radio</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="customRadio4" name="customRadio1"
                                               class="form-check-input">
                                        <label class="form-check-label" for="customRadio4">Or toggle this other
                                            custom radio</label>
                                    </div>
                                </div>
                                <h6 class="fs-15 mt-3">Disabled</h6>
                                <div class="mt-2">
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="customRadio5" name="customRadio2"
                                               class="form-check-input" disabled>
                                        <label class="form-check-label" for="customRadio5">Toggle this custom
                                            radio</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="customRadio6" name="customRadio2"
                                               class="form-check-input" checked disabled>
                                        <label class="form-check-label" for="customRadio6">Or toggle this other
                                            custom radio</label>
                                    </div>
                                </div>
                                <h6 class="fs-15 mt-3">Colors</h6>
                                <div class="form-check mb-2">
                                    <input type="radio" id="customRadiocolor1" name="customRadiocolor1"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor1">Default Radio</label>
                                </div>
                                <div class="form-check form-radio-success mb-2">
                                    <input type="radio" id="customRadiocolor2" name="customRadiocolor2"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor2">Success Radio</label>
                                </div>
                                <div class="form-check form-radio-info mb-2">
                                    <input type="radio" id="customRadiocolor3" name="customRadiocolor3"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor3">Info Radio</label>
                                </div>
                                <div class="form-check form-radio-secondary mb-2">
                                    <input type="radio" id="customRadiocolor6" name="customRadiocolor6"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor6">Secondary Radio</label>
                                </div>
                                <div class="form-check form-radio-warning mb-2">
                                    <input type="radio" id="customRadiocolor4" name="customRadiocolor4"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor4">Warning Radio</label>
                                </div>
                                <div class="form-check form-radio-danger mb-2">
                                    <input type="radio" id="customRadiocolor5" name="customRadiocolor5"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor5">Danger Radio</label>
                                </div>
                                <div class="form-check form-radio-dark">
                                    <input type="radio" id="customRadiocolor7" name="customRadiocolor7"
                                           class="form-check-input" checked>
                                    <label class="form-check-label" for="customRadiocolor7">Dark Radio</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Input Sizes</h4>
                                <p class="text-muted mb-0">
                                    Set heights using classes like <code>.input-lg</code>, and set widths using grid
                                    column classes like <code>.col-lg-*</code>.
                                </p>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="mb-3">
                                        <label for="example-input-small" class="form-label">Small</label>
                                        <input type="text" id="example-input-small" name="example-input-small"
                                               class="form-control form-control-sm" placeholder=".input-sm">
                                    </div>
                                    <div class="mb-3">
                                        <label for="example-input-normal" class="form-label">Normal</label>
                                        <input type="text" id="example-input-normal" name="example-input-normal"
                                               class="form-control" placeholder="Normal">
                                    </div>
                                    <div class="mb-3">
                                        <label for="example-input-large" class="form-label">Large</label>
                                        <input type="text" id="example-input-large" name="example-input-large"
                                               class="form-control form-control-lg" placeholder=".input-lg">
                                    </div>
                                    <div class="mb-2">
                                        <label for="example-gridsize" class="form-label">Grid Sizes</label>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <input type="text" id="example-gridsize" class="form-control"
                                                       placeholder=".col-sm-4">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Input Group</h4>
                                <p class="text-muted mb-0">
                                    Easily extend form controls by adding text, buttons, or button groups on either
                                    side of textual inputs, custom selects, and custom file inputs
                                </p>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="mb-3">
                                        <label class="form-label">Static</label>
                                        <div class="input-group flex-nowrap">
                                            <span class="input-group-text" id="basic-addon1">@</span>
                                            <input type="text" class="form-control" placeholder="Username"
                                                   aria-label="Username" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Dropdowns</label>
                                        <div class="input-group">
                                            <button class="btn btn-primary dropdown-toggle" type="button"
                                                    data-bs-toggle="dropdown" aria-haspopup="true"
                                                    aria-expanded="false">Dropdown
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                            </div>
                                            <input type="text" class="form-control" placeholder="" aria-label=""
                                                   aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Buttons</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Recipient's username"
                                                   aria-label="Recipient's username">
                                            <button class="btn btn-dark" type="button">Button</button>
                                        </div>
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-sm-6">
                                            <label class="form-label">File input</label>
                                            <input class="form-control" type="file" id="inputGroupFile04">
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="formFileMultiple01" class="form-label">Multiple files
                                                input</label>
                                            <input class="form-control" type="file" id="formFileMultiple01" multiple>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Basic Example</h4>
                                <p class="text-muted mb-0">Here’s a quick example to demonstrate Bootstrap’s form
                                    styles. Keep reading for documentation on required classes, form layout, and
                                    more.
                                </p>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1"
                                               aria-describedby="emailHelp" placeholder="Enter email">
                                        <small id="emailHelp" class="form-text text-muted">We'll never share your
                                            email with anyone else.</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleInputPassword1" class="form-label">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1"
                                               placeholder="Password">
                                    </div>
                                    <div class=" mb-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="checkmeout0">
                                            <label class="form-check-label" for="checkmeout0">Check me out !</label>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Horizontal form</h4>
                                <p class="text-muted mb-0">Create horizontal forms with the grid by adding the
                                    <code>.row</code> class to form groups and using the <code>.col-*-*</code>
                                    classes to specify the width of your labels and controls. Be sure to add
                                    <code>.col-form-label</code> to your <code>&lt;label&gt;</code>s as well so
                                    they’re vertically centered with their associated form controls.
                                </p>
                            </div>
                            <div class="card-body">
                                <form class="form-horizontal">
                                    <div class="row mb-3">
                                        <label for="inputEmail3" class="col-3 col-form-label">Email</label>
                                        <div class="col-9">
                                            <input type="email" class="form-control" id="inputEmail3"
                                                   placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="inputPassword3" class="col-3 col-form-label">Password</label>
                                        <div class="col-9">
                                            <input type="password" class="form-control" id="inputPassword3"
                                                   placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="inputPassword5" class="col-3 col-form-label">Re Password</label>
                                        <div class="col-9">
                                            <input type="password" class="form-control" id="inputPassword5"
                                                   placeholder="Retype Password">
                                        </div>
                                    </div>
                                    <div class="row mb-3 justify-content-end">
                                        <div class="col-9">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="checkmeout">
                                                <label class="form-check-label" for="checkmeout">Check me out
                                                    !</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="justify-content-end row">
                                        <div class="col-9">
                                            <button type="submit" class="btn btn-info">Sign in</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Inline Form</h4>
                                <p class="text-muted mb-0">
                                    Use the <code>.row-cols-lg-auto</code>, <code>.g-3</code> &
                                    <code>.align-items-center</code> class to display a series of labels, form
                                    controls, and buttons on a single horizontal row. Form controls within inline
                                    forms vary slightly from their default states. Controls only appear inline in
                                    viewports that are at least 576px wide to account for narrow viewports on mobile
                                    devices.
                                </p>
                            </div>
                            <div class="card-body">
                                <form class="row row-cols-lg-auto g-3 align-items-center">
                                    <div class="col-12">
                                        <label for="staticEmail2" class="visually-hidden">Email</label>
                                        <input type="text" readonly class="form-control-plaintext" id="staticEmail2"
                                               value="email@example.com">
                                    </div>
                                    <div class="col-12">
                                        <label for="inputPassword2" class="visually-hidden">Password</label>
                                        <input type="password" class="form-control" id="inputPassword2"
                                               placeholder="Password">
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary">Confirm identity</button>
                                    </div>
                                </form>
                                <h6 class="fs-13 mt-3">Auto-sizing</h6>
                                <form>
                                    <div class="row gy-2 gx-2 align-items-center">
                                        <div class="col-auto">
                                            <label class="visually-hidden" for="inlineFormInput">Name</label>
                                            <input type="text" class="form-control mb-2" id="inlineFormInput"
                                                   placeholder="Jane Doe">
                                        </div>
                                        <div class="col-auto">
                                            <label class="visually-hidden" for="inlineFormInputGroup">Username</label>
                                            <div class="input-group mb-2">
                                                <div class="input-group-text">@</div>
                                                <input type="text" class="form-control" id="inlineFormInputGroup"
                                                       placeholder="Username">
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="form-check mb-2">
                                                <input type="checkbox" class="form-check-input" id="autoSizingCheck">
                                                <label class="form-check-label" for="autoSizingCheck">Remember
                                                    me</label>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit" class="btn btn-primary mb-2">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Horizontal form label sizing</h4>
                                <p class="text-muted mb-0">Be sure to use <code>.col-form-label-sm</code> or
                                    <code>.col-form-label-lg</code> to your <code>&lt;label&gt;</code>s or
                                    <code>&lt;legend&gt;</code>s to correctly follow the size of
                                    <code>.form-control-lg</code> and <code>.form-control-sm</code>.
                                </p>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="mb-2 row">
                                        <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control form-control-sm" id="colFormLabelSm"
                                                   placeholder="col-form-label-sm">
                                        </div>
                                    </div>
                                    <div class="mb-2 row">
                                        <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control" id="colFormLabel"
                                                   placeholder="col-form-label">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control form-control-lg" id="colFormLabelLg"
                                                   placeholder="col-form-label-lg">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="header-title">Form Row</h4>
                                <p class="text-muted mb-0">
                                    By adding <code>.row</code> & <code>.g-2</code>, you can have control over the
                                    gutter width in as well the inline as block direction.
                                </p>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-6">
                                            <label for="inputEmail4" class="form-label">Email</label>
                                            <input type="email" class="form-control" id="inputEmail4"
                                                   placeholder="Email">
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label for="inputPassword4" class="form-label">Password</label>
                                            <input type="password" class="form-control" id="inputPassword4"
                                                   placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="inputAddress" class="form-label">Address</label>
                                        <input type="text" class="form-control" id="inputAddress"
                                               placeholder="1234 Main St">
                                    </div>
                                    <div class="mb-3">
                                        <label for="inputAddress2" class="form-label">Address 2</label>
                                        <input type="text" class="form-control" id="inputAddress2"
                                               placeholder="Apartment, studio, or floor">
                                    </div>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-6">
                                            <label for="inputCity" class="form-label">City</label>
                                            <input type="text" class="form-control" id="inputCity">
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="inputState" class="form-label">State</label>
                                            <select id="inputState" class="form-select">
                                                <option>Choose</option>
                                                <option>Option 1</option>
                                                <option>Option 2</option>
                                                <option>Option 3</option>
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label for="inputZip" class="form-label">Zip</label>
                                            <input type="text" class="form-control" id="inputZip">
                                        </div>
                                    </div>
                                    <div class="mb-2">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="customCheck11">
                                            <label class="form-check-label" for="customCheck11">Check this custom
                                                checkbox</label>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 text-center">
                        <script>document.write(new Date().getFullYear())</script>
                        © Velonic - By <a href="http://www.bootstrapmb.com">bootstrapMB</a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="theme-settings-offcanvas">
    <div class="d-flex align-items-center bg-primary p-3 offcanvas-header">
        <h5 class="text-white m-0">Theme Settings</h5>
        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0">
        <div data-simplebar class="h-100">
            <div class="p-3">
                <h5 class="mb-3 fs-16 fw-bold">Color Scheme</h5>
                <div class="row">
                    <div class="col-4">
                        <div class="form-check form-switch card-switch mb-1">
                            <input class="form-check-input" type="checkbox" name="data-bs-theme" id="layout-color-light"
                                   value="light">
                            <label class="form-check-label" for="layout-color-light">
                                <img src="assets/images/layouts/light.png" alt="" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="font-14 text-center text-muted mt-2">Light</h5>
                    </div>
                    <div class="col-4">
                        <div class="form-check form-switch card-switch mb-1">
                            <input class="form-check-input" type="checkbox" name="data-bs-theme" id="layout-color-dark"
                                   value="dark">
                            <label class="form-check-label" for="layout-color-dark">
                                <img src="assets/images/layouts/dark.png" alt="" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="font-14 text-center text-muted mt-2">Dark</h5>
                    </div>
                </div>
                <div id="layout-width">
                    <h5 class="my-3 fs-16 fw-bold">Layout Mode</h5>
                    <div class="row">
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-layout-mode"
                                       id="layout-mode-fluid" value="fluid">
                                <label class="form-check-label" for="layout-mode-fluid">
                                    <img src="assets/images/layouts/light.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Fluid</h5>
                        </div>
                        <div class="col-4">
                            <div id="layout-boxed">
                                <div class="form-check form-switch card-switch mb-1">
                                    <input class="form-check-input" type="checkbox" name="data-layout-mode"
                                           id="layout-mode-boxed" value="boxed">
                                    <label class="form-check-label" for="layout-mode-boxed">
                                        <img src="assets/images/layouts/boxed.png" alt="" class="img-fluid">
                                    </label>
                                </div>
                                <h5 class="font-14 text-center text-muted mt-2">Boxed</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <h5 class="my-3 fs-16 fw-bold">Topbar Color</h5>
                <div class="row">
                    <div class="col-4">
                        <div class="form-check form-switch card-switch mb-1">
                            <input class="form-check-input" type="checkbox" name="data-topbar-color"
                                   id="topbar-color-light" value="light">
                            <label class="form-check-label" for="topbar-color-light">
                                <img src="assets/images/layouts/light.png" alt="" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="font-14 text-center text-muted mt-2">Light</h5>
                    </div>
                    <div class="col-4">
                        <div class="form-check form-switch card-switch mb-1">
                            <input class="form-check-input" type="checkbox" name="data-topbar-color"
                                   id="topbar-color-dark" value="dark">
                            <label class="form-check-label" for="topbar-color-dark">
                                <img src="assets/images/layouts/topbar-dark.png" alt="" class="img-fluid">
                            </label>
                        </div>
                        <h5 class="font-14 text-center text-muted mt-2">Dark</h5>
                    </div>
                </div>
                <div>
                    <h5 class="my-3 fs-16 fw-bold">Menu Color</h5>
                    <div class="row">
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-menu-color"
                                       id="leftbar-color-light" value="light">
                                <label class="form-check-label" for="leftbar-color-light">
                                    <img src="assets/images/layouts/sidebar-light.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Light</h5>
                        </div>
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-menu-color"
                                       id="leftbar-color-dark" value="dark">
                                <label class="form-check-label" for="leftbar-color-dark">
                                    <img src="assets/images/layouts/light.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Dark</h5>
                        </div>
                    </div>
                </div>
                <div id="sidebar-size">
                    <h5 class="my-3 fs-16 fw-bold">Sidebar Size</h5>
                    <div class="row">
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-sidenav-size"
                                       id="leftbar-size-default" value="default">
                                <label class="form-check-label" for="leftbar-size-default">
                                    <img src="assets/images/layouts/light.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Default</h5>
                        </div>
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-sidenav-size"
                                       id="leftbar-size-compact" value="compact">
                                <label class="form-check-label" for="leftbar-size-compact">
                                    <img src="assets/images/layouts/compact.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Compact</h5>
                        </div>
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-sidenav-size"
                                       id="leftbar-size-small" value="condensed">
                                <label class="form-check-label" for="leftbar-size-small">
                                    <img src="assets/images/layouts/sm.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Condensed</h5>
                        </div>
                        <div class="col-4">
                            <div class="form-check form-switch card-switch mb-1">
                                <input class="form-check-input" type="checkbox" name="data-sidenav-size"
                                       id="leftbar-size-full" value="full">
                                <label class="form-check-label" for="leftbar-size-full">
                                    <img src="assets/images/layouts/full.png" alt="" class="img-fluid">
                                </label>
                            </div>
                            <h5 class="font-14 text-center text-muted mt-2">Full Layout</h5>
                        </div>
                    </div>
                </div>
                <div id="layout-position">
                    <h5 class="my-3 fs-16 fw-bold">Layout Position</h5>
                    <div class="btn-group checkbox" role="group">
                        <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed"
                               value="fixed">
                        <label class="btn btn-soft-primary w-sm" for="layout-position-fixed">Fixed</label>
                        <input type="radio" class="btn-check" name="data-layout-position"
                               id="layout-position-scrollable" value="scrollable">
                        <label class="btn btn-soft-primary w-sm ms-0"
                               for="layout-position-scrollable">Scrollable</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas-footer border-top p-3 text-center">
        <div class="row">
            <div class="col-6">
                <button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
            </div>
            <div class="col-6">
                <a href="" target="_blank" role="button" class="btn btn-primary w-100">Buy Now</a>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>

</html>